let rankData = [{
    'date': '2020-03-14',
    'category': '2020-03-14',
    'data': [{'name': 'A商品', 'value': 6509}, {'name': 'B商品', 'value': 4791}, {
        'name': 'C商品',
        'value': 3447
    }, {'name': 'D商品', 'value': 2906}, {'name': 'E商品', 'value': 2611},]
}, {
    'date': '2020-03-13',
    'category': '2020-03-13',
    'data': [{'name': 'A商品', 'value': 4874}, {'name': 'B商品', 'value': 3662}, {
        'name': 'D商品',
        'value': 2431
    }, {'name': 'C商品', 'value': 2160}, {'name': 'E商品', 'value': 2101},]
}, {
    'date': '2020-03-12',
    'category': '2020-03-12',
    'data': [{'name': 'A商品', 'value': 3751}, {'name': 'B商品', 'value': 3398}, {
        'name': 'D商品',
        'value': 2129
    }, {'name': 'C商品', 'value': 2110}, {'name': 'E商品', 'value': 2088},]
}, {
    'date': '2020-03-11',
    'category': '2020-03-11',
    'data': [{'name': 'A商品', 'value': 2642}, {'name': 'B商品', 'value': 2332}, {
        'name': 'D商品',
        'value': 1095
    }, {'name': 'C商品', 'value': 1075}, {'name': 'E商品', 'value': 1063},]
}, {
    'date': '2020-03-10',
    'category': '2020-03-10',
    'data': [{'name': 'B商品', 'value': 1345}, {'name': 'A商品', 'value': 1045}, {
        'name': 'D商品',
        'value': 870
    }, {'name': 'C商品', 'value': 696}, {'name': 'E商品', 'value': 640},]
},];
let title = '商品累计销售情况'
let playInterval = 1000;
//排行颜色
let colorListS1 = [];
let colors = []
for (var i = 0; i < rankData.length; i++) {
    var colorListF1 = {};
    for (var n = 0; n < rankData[i].data.length; n++) {
        //每阶段内部循环        var name = rank
        rankData[i].data[n].name;  //排行榜上项目的名称        colorListF1[nam
        colorListF1[name] = colors[n];        //排行榜上项目名称和对应的颜色，
    }
    colorListS1[i] = colorListF1;
    //其中每个排名位置的颜色不变    }    colorListS1[i] = co
}
let option = {
    baseOption: {
        animationDurationUpdate: playInterval * 1.5,
        animationEasingUpdate: 'quinticInOut',
        timeline: {
            show: false,
            axisType: 'category',
            orient: 'vertical',
            autoPlay: 'true',
            loop: false,
            playInterval: playInterval,
            left: null,
            right: 30,
            bottom: 100,
            height: null,
            label: {
                normal: {
                    show: true,
                    color: '#ccc'
                }
            },
            checkpointStyle: {
                symbol: 'none',
                color: '#bbb',
                borderColor: '#777',
                show: false,
                borderWidth: 1
            },
            controlStyle: {
                showNextBtn: false,
                showPrevBtn: false,
                normal: {
                    color: '#666',
                    show: false,
                    borderColor: '#666'
                },
                emphasis: {
                    color: '#aaa',
                    borderColor: '#aaa'
                }
            },
            data: rankData.map(e => e.date)
        }
    },
    title: [
        {
            left: 'center', top: '3%', textStyle: {
                fontSize: 25, color: 'rgba(121,121,121, 0.9)'
            }
        },
        {left: 'center', top: '5%'}
    ],
    grid: [{left: '20%', right: '20%', top: '12%', height: 'auto', bottom: '25%'}],
    xAxis: [{}],
    yAxis: [{}],
    series: [{
        id: 'bar', type: 'bar', barWidth: '20', tooltip: {show: false}, label: {
            normal: {
                show: true, position: 'right'
            }
        }, data: []
    }],
    options: []
}
let maxInterval = 5;
for (let i = rankData.length - 1; i > 0; i--) {
    let xMax = 20;
    if (rankData[i].data[0].value > 20) {
        xMax = 'dataMax'
    }
    if (rankData[i].data[0].value / maxInterval >= 10) {
        maxInterval = rankData[i].data[0].value / 5;
    }
    option.options.push({
        backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{offset: 0, color: '#004de8'}, {
            offset: 1,
            color: '#14181d'
        }]),
        title: {text: title + '' + rankData[i].category, color: '#bfbfbf'},

        xAxis: [{
            show: true,
            type: 'value',
            interval: maxInterval,
            max: xMax,
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                color: 'rgba(255,0,0,3)'
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: ['rgba(121,123,121, 0.3)', 'rgba(121,123,121, 0)']
                }
            }
        }],
        yAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(121,121,121, 1)'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {}
            },
            data: rankData[i].data.map(e => e.name)
        }],
        series: [
            {
                type: 'bar',
                id: 'bar',
                barWidth: 20,
                itemStyle: {
                    color: params => {
                        let colorListr = [
                            '#0f4471',
                            '#00adb5',
                            '#ff5722',
                            '#5628b4',
                            '#20BF55',
                            '#f23557']
                        return colorListr[params.dataIndex]
                    },

                    label: {
                        show: true,
                        fontSize: 10,
                        position: 'top',
                        formatter: '[c]%'
                    },
                    shadowBlur: 20,
                    shadowColor: 'rgba(40,40,40, 0.5)'
                },
                label: {
                    normal: {
                        position: 'right',
                        formatter: (p) => p.name + ":" + p.value
                    }
                },
                data: rankData[i].data.map(ele => ele.value).sort((a, b) => a > b)
            }]
    })

}